<template>
  <ul class="user_Overview flex">
	  <li class="user_Overview-item" style="color: #f5023d">
	    <div class="user_Overview_nums laramnum" style="font-size: 14px;">
	      {{shortcircuit}}
	    </div>
	    <p>短路保护数</p>
	  </li>
    <li class="user_Overview-item" style="color: #00fdfa">
      <div class="user_Overview_nums allnum" style="font-size: 14px;">
        <CountUp :endVal="riskorder" :duration="duration" />
      </div>
      <p>风险订单数</p>
    </li>
    <li class="user_Overview-item" style="color: #07f7a8">
      <div class="user_Overview_nums online" style="font-size: 14px;">
        <CountUp :endVal="overcharge" :duration="duration" />
      </div>
      <p>阻止过充数</p>
    </li>
    <li class="user_Overview-item" style="color: #e3b337">
      <div class="user_Overview_nums offline" style="font-size: 14px;">
        <CountUp :endVal="highpower" :duration="duration" />
      </div>
      <p>阻止最大功率数</p>
    </li>
    <li class="user_Overview-item" style="color: #07f7a8">
      <div class="user_Overview_nums online" style="font-size: 14px;">
        {{totalcharge}}
      </div>
      <p>充电次数</p>
    </li>
  </ul>
</template>
<script>
import { getLocalStorage, setLocalStorage } from '@/utils';
import axios from 'axios'
	export default {
		name: 'showRT',
		data() {
			return {
				highpower: 0,
				overcharge: 0,
				riskorder: 0,
				shortcircuit: 0,
				totalcharge:0
			}
		},
		mounted() {
			this.getData();
		},
		methods: {
			getData() {
				let sid = getLocalStorage('shopId');
				let url = "http://wx.zsltwl.cn/wxsite/screen/abnormalCountNew";
				let params = {
					sid: sid
				}
				//发起ajax请求-GET(注意参数必须保存到params属性中)
				axios.get(url, {
					params: params
				}).then(resp => {
					console.log(resp)
					if (resp.success) {
						console.log(resp)
						this.highpower = resp.data.highpower;
						this.overcharge = resp.data.overcharge;
						this.riskorder = resp.data.riskorder;
						this.shortcircuit = resp.data.shortcircuit;
						this.totalcharge = resp.data.totalcharge;
					}
				}).catch(err => {
					console.log(err);
				})
			}
		}
	}
</script>
<style scoped lang="scss">
.left-top {
  width: 100%;
  height: 100%;
}

.user_Overview {
  li {
    flex: 1;

    p {
      text-align: center;
      height: 16px;
      font-size: 16px;
    }

    .user_Overview_nums {
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 22px;
      margin: 50px auto 30px;
      background-size: cover;
      background-position: center center;
      position: relative;

      &::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }

      &.bgdonghua::before {
        animation: rotating 14s linear infinite;
      }
    }

    .allnum {
      &::before {
        background-image: url("@/assets/img/left_top_lan.png");
      }
    }

    .online {
      &::before {
        background-image: url("@/assets/img/left_top_lv.png");
      }
    }

    .offline {
      &::before {
        background-image: url("@/assets/img/left_top_huang.png");
      }
    }

    .laramnum {
      &::before {
        background-image: url("@/assets/img/left_top_hong.png");
      }
    }
  }
}
</style>
